<template>
  <view class="pages">
    <view class="user-menu-wrap w100">
      <view class="user-menu">
        <view class="item" v-for="item in menus" @click="openEdit(item.tap)">
          <text>{{item.label}}</text>
          <view class="right">
            <image v-if="item.tap=='avatar'" mode="aspectFill" :src="avatar"></image>
            <text v-else-if="item.tap=='mobile'">{{mobile}}</text>
            <text v-else-if="item.tap=='nickname'">{{nickname}}</text>
            <u-icon v-if="item.tap!='mobile'" :size="28" color="#ccc" name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <u-popup :show="show" mode="center" @close="close" :safeAreaInsetBottom="false">
      <view class="popup-wrap popup-wrap-modal">
        <view class="popup-tit">修改{{formTitle}}</view>
        <view class="popup-box">
          <u-upload v-if="inputName=='avatar'" :fileList="avatarList" @afterRead="avatarAfterRead"
            @delete="avatarDelete" width="200" height="200" :maxCount="1" :previewFullImage="true"></u-upload>
          <u--input v-if="inputName=='nickname'" v-model="nickname" border="surround" placeholder="请输入昵称"></u--input>
        </view>
        <view class="popup-bottom"><u-button type="primary" @click="confirm('avatar')">确认修改</u-button></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import store from '@/utils/store'
  export default {
    data() {
      return {
        show: false,
        menus: [{
          label: '头像',
          tap: 'avatar',
        }, {
          label: '手机号',
          tap: 'mobile',
        }, {
          label: '昵称',
          tap: 'nickname',
        }, {
          label: '用户协议',
          tap: 'userAgreement',
        }, {
          label: '隐私协议',
          tap: 'privacyAgreement',
        }],
        avatar: '',
        avatarList: [],
        mobile: '',
        nickname: '',
        formTitle: '',
        inputName: '',
      }
    },
    onLoad() {
      this.getUserInfo()
    },
    methods: {
      async getUserInfo() {
        await this.$http('/user/userinfo').then(res => {
          if (res.avatar) {
            this.avatarList = [res.avatar]
            this.avatar = res.avatar
          }
          if (res.mobile) this.mobile = res.mobile
          if (res.nickname) this.nickname = res.nickname
        })
      },
      openEdit(name) {
        if (name == 'mobile') return
        if (['userAgreement', 'privacyAgreement'].includes(name)) return this.$to('/pages/my/about/' + name)
        this.show = true
        this.inputName = name
        if (name == 'avatar') this.formTitle = '头像'
        if (name == 'nickname') this.formTitle = '昵称'
        
      },
      // 关闭头像弹窗
      close() {
        this.show = false
      },
      // 选择身份证正面
      avatarAfterRead(event) {
        // this.avatar = event.file
        this.avatarList = [event.file]
      },
      // 删除图片
      avatarDelete(event) {
        // this.avatar = ''
        this.avatarList = []
      },
      async confirm() {
        if (this.inputName == 'nickname') {
          if (this.nickname == '') return this.$f.toast('请输入昵称')
          this.submit()
        } else if (this.inputName == 'avatar') {
          if (this.avatarList.length == 0) return this.$f.toast('请选择头像')
          this.$f.tipLoading('图片上传中')
          const result = await this.uploadFilePromise(this.avatarList[0].url)
          this.avatar = result.fullurl
          uni.hideLoading()
          this.submit()
        }
      },
      submit(form) {
        let params = {}
        if (this.inputName == 'nickname') params.nickname = this.nickname
        if (this.inputName == 'avatar') params.avatar = this.avatar
        this.$http('/user/profile', params).then(res => {
          this.show = false
          this.$f.successToast('修改成功')
          this.getUserInfo()
        })
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'https://hsxt.ruyihui.net/api/common/upload',
            filePath: url,
            header: {
              'token': uni.getStorageSync('token')
              // 'token': '0fe60a01-8332-409e-8d01-fdf0d4f9b1bd',
            },
            name: 'file',
            timeout: 10000,
            success: (res) => {
              setTimeout(() => {
                resolve(JSON.parse(res.data).data)
              }, 1000)
            },
            fail: res => {
              console.log('error')
              this.$f.errorToast('上传失败')
              reject(res)
            }
          });
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .pages {
    background: linear-gradient(#cce4fb, #f0f4fa);
    padding: 16rpx 16rpx calc(16rpx + #{$safe});
  }

  .user-menu-wrap {
    padding: 16rpx;
    box-sizing: border-box;
  }

  .user-menu {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx 38rpx;

    .item {
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 0;

      .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 50%;

        image {
          width: 70rpx;
          height: 70rpx;
          border-radius: 70rpx;
          background-color: #eee;
        }

        text {
          text-align: right;
        }
      }


      text {
        width: 530rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }

  // .popup-box {
  //   padding: 40rpx;
  //   .popup-tit{
  //     text-align: center;
  //   }
  //   .confirm {
  //     ::v-deep .u-button {
  //       font-size: 28rpx !important;
  //     }
  //   }
  // }
</style>
